<template>
  <div>
    <Form :model="boothModel" ref="boothInfoForm" :label-width="140" label-colon inline :show-message="false">

      <FormItem label="展示类型" prop="displayType" required style="width: 100%">
        <div style="display: flex;flex-direction: row;">
          <Button ghost type="info" @click="showTypeSelectModal()" style="margin: 0.5rem;">选择展示类型</Button>
          <div v-if="boothModel.displayType!=null">
            <div class="uploaded-img">
              <img :src="displayImg(boothModel.displayType)"/>
            </div>
            <div class="type-name">{{displayTypeName(boothModel.displayType)}}</div>
          </div>

        </div>

      </FormItem>
      <Row v-show="!boothIsCategoryList && !boothIsHtml">
        <FormItem label="展区标题" prop="title">
          <Input v-model.trim="boothModel.title" class="input_item"></Input>
        </FormItem>
      </Row>

      <FormItem label="显示平台" prop="platform" required v-show="!boothIsCategoryList">
        <Select v-model="boothModel.platform" style="width: 200px;">
          <Option v-for="item in boothPlatforms" :value="item.value" :key="item.value" :disabled="isPlatformDisabled(item.value) || (boothIsHtml && !isPcPlatform(item.value))">{{item.label}}</Option>
        </Select>
      </FormItem>

      <FormItem label="展区顺序" prop="sequence">
        <Input type="number" v-model="boothModel.sequence" style="width: auto;" placeholder="数字越小越靠前"></Input>
      </FormItem>

      <FormItem label="显示行数" prop="rowNumber" :required="boothIsSlide" v-show="boothIsSlide">
        <Select v-model="boothModel.rowNumber" style="width: 150px;">
          <Option :value="1">1</Option>
          <Option :value="2">2</Option>
        </Select>
      </FormItem>

      <template v-show="!boothIsSlide && !boothIsHtml">
        <FormItem label="PC-每行几列" prop="columnPc" :required="(boothIsUnion || boothIsPc) && boothIsTiled" v-show="(boothIsUnion || boothIsPc) && boothIsTiled">
          <Input type="number" v-model="boothModel.columnPc" style="width: auto;" ></Input>
        </FormItem>
        <FormItem label="手机端-每行几列" prop="columnMobile" :required="boothIsTiled" v-show="boothIsTiled">
          <Input type="number" v-model="boothModel.columnMobile" style="width: auto"></Input>
        </FormItem>
      </template>
      <Row >
        <FormItem label="内部备注" prop="note" v-if="!boothIsCategoryList" style="width: 90%">
          <Input type="textarea"  v-model.trim="boothModel.note"   placeholder="用户不可见，可中文" :rows="2"></Input>
        </FormItem>
      </Row>

      <div v-show="boothIsHtml">
        <divider></divider>
        <FormItem prop="htmlContent" v-show="false"></FormItem>
        <div style="margin-bottom: 5px;">
          <i-switch v-model="boothModel.isCodeEdit" :disabled="!isEmpty(boothModel.htmlContent)" size="small" false-color="#ff9900"></i-switch>
          <span style="margin-left: 5px;">{{boothModel.isCodeEdit?"html代码片段":"富文本"}}</span>
          <Button type="primary" size="small" icon="md-search" @click="previewHtmlContent()" style="float: right;">预览</Button>
        </div>
        <rich-text v-model="boothModel.htmlContent" :is-code-edit="boothModel.isCodeEdit" :image-handler="selectImage"></rich-text>
      </div>
    </Form>

    <Modal v-model="typeListModal.isShow" :footer-hide="true" border="0" :closable="false">
      <List>
        <ListItem v-for="item in boothTypes" :key="item.value" style="cursor: pointer;"
                  :class="{'selected-item': isSelectedType(item.value)}"
                  @click.native="selectDisplayType(item.value)"
                  v-if="!(showroomIsCommon && isCategoryListType(item.value))">
          <Col :span="9" :offset="1">
            <img :src="item.img" style="max-width: 100%;"/>
          </Col>
          <Col :span="13" :offset="1">
            <p>{{item.label}}</p>
            <p>{{item.desc}}</p>
            <p v-if="isRichTextHtmlType(item.value)" style="text-align: right;">
              <Tag color="warning">PC Only</Tag>
            </p>
<!--            <Tag v-else>PC And APP</Tag>-->
          </Col>
        </ListItem>
      </List>
    </Modal>

    <!-- 选择图片弹窗 -->
    <Modal v-model="imageSelectModal.isShow" title="单击选择图片" footer-hide
           :styles="{top: '20px',bottom:'20px',}" width="70%" height="1000">
      <image-select :hideleft="true" @cancelClicked="hideImageSelectModal()" @sureClicked="selectedImage"></image-select>
    </Modal>

    <!-- html内容预览 -->
    <Modal v-model="previewModal.isShow" title="预览" width="98%">
      <div v-html="boothModel.htmlContent"></div>
    </Modal>
  </div>
</template>

<script>
import commonData from "./js/stand/common_data";
import {imageInit, webImageList} from "../image/js/select/image_funs";
import imageData from "../image/js/select/image_data";
import ImageSelect from "../image/ImageSelect";
import RichText from "../widgets/quill/RichText";
import {isEmpty} from "../js/commonUtils";

export default {
  name: "ABoothForm",
  props: {
    boothModel: {type: Object, required: true},
    showroomPlatform: {type: Number, required: true},
    showroomType: {type: Number, required: true},
  },
  components: {
    RichText,
    ImageSelect,
  },
  data() {
    return {
      yunPath: this.$store.getters.imgPrefix,
      boothTypes: commonData.boothDic.types,
      boothPlatforms: commonData.boothDic.platforms,
      boothRules: commonData.rules.boothRules,
      typeListModal: {
        isShow: false,
      },
      imageSelectModal: {
        isShow: false,
        editorRef: "",
        editorContainer: null,
      },
      previewModal: {
        isShow: false,
      }
    }
  },
  methods: {
    isEmpty(val) {
      return isEmpty(val);
    },
    isPlatformDisabled(platform) {
      if(this.showroomIsUnion) {
        return false;
      }
      if(this.showroomIsPc) {
        return platform != commonData.standsDic.pcPlatform;
      }
      if(this.showroomIsApp) {
        return platform != commonData.standsDic.appPlatform;
      }
    },
    widthHeightRatio(width, height) {
      if(width==null || height==null || height==0) {
        return "";
      }
      return (width/height).toFixed(2);
    },
    changeBoothType(type) {
      if(type == commonData.boothDic.tiledType) {
        this.boothModel.columnPc = 1;
        this.boothModel.columnMobile = 1;
      }else{
        this.boothModel.columnPc = null;
        this.boothModel.columnMobile = null;
        if(type == commonData.boothDic.htmlType) {
          this.boothModel.platform = commonData.standsDic.pcPlatform;
        }
      }
    },
    numberValidate(rule, value, callback) {
      let numReg = /^[0-9]*$/g;
      if(numReg.test(value)) {
        callback();
      }else{
        callback(new Error());
      }
    },
    displayImg(type){
      return commonData.boothDic.typeImgKeyPrefix + type + (this.boothIsTiled?".gif":".jpg");
    },
    displayTypeName(type) {
      let element = commonData.boothDic.types.find(element => element.value==type);
      return element==null?"":element.label;
    },
    displayTypeDesc(type) {
      let element = commonData.boothDic.types.find(element => element.value==type);
      return element==null?"":element.desc;
    },
    isSelectedType(type) {
      return type == this.boothModel.displayType;
    },
    showTypeSelectModal() {
      this.typeListModal.isShow = true;
    },
    selectDisplayType(type) {
      this.boothModel.displayType = type;
      this.changeBoothType(type);
      this.typeListModal.isShow = false;
    },
    isCategoryListType(type) {
      return type == commonData.boothDic.categoryListType;
    },
    isRichTextHtmlType(type) {
      return type == commonData.boothDic.htmlType;
    },
    selectImage(_this, editor) {
      this.imageSelectModal.isShow = true;
      this.imageSelectModal.editorContainer = _this;
      this.imageSelectModal.editorRef = editor;
      imageInit(this, imageData, false, true, commonData.standsDic.folderType);
      imageData.tParams.folderType = commonData.standsDic.folderType;
      imageData.tParams.folderList.folderName = this.boothModel.showroomId;
      webImageList(this, imageData);
    },
    hideImageSelectModal() {
      this.imageSelectModal.isShow=false
    },
    selectedImage(selectedImages) {
      this.imageSelectModal.isShow = false;
      if(selectedImages.length > 0) {
        let img = selectedImages[0].yunKey;
        this.insertImage(img);
      }
    },
    insertImage(yunKey) {
      let editor = this.imageSelectModal.editorContainer.$refs[this.imageSelectModal.editorRef];
      let selection = editor.quill.getSelection();
      let url = this.yunPath + yunKey;
      editor.quill.insertEmbed(selection==null?0:selection.index, 'image', url);
    },
    isPcPlatform(platform) {
      return platform == commonData.standsDic.pcPlatform;
    },
    previewHtmlContent() {
      this.previewModal.isShow = true;
    },
  },
  computed: {
    showroomIsPc() {
      return this.showroomPlatform == commonData.standsDic.pcPlatform;
    },
    showroomIsApp() {
      return this.showroomPlatform == commonData.standsDic.appPlatform;
    },
    showroomIsUnion() {
      return this.showroomPlatform == commonData.standsDic.unionPlatform;
    },
    showroomIsCommon() {
      return this.showroomType == commonData.standsDic.commonType;
    },
    boothIsPc() {
      return this.boothModel.platform == commonData.standsDic.pcPlatform;
    },
    boothIsApp() {
      return this.boothModel.platform == commonData.standsDic.appPlatform;
    },
    boothIsUnion() {
      return this.boothModel.platform == commonData.standsDic.unionPlatform;
    },
    boothIsBanner() {
      return this.boothModel.displayType == commonData.boothDic.bannerType;
    },
    boothIsSingle() {
      return this.boothModel.displayType == commonData.boothDic.singleType;
    },
    boothIsTiled() {
      return this.boothModel.displayType == commonData.boothDic.tiledType;
    },
    boothIsSlide() {
      return this.boothModel.displayType == commonData.boothDic.slideType;
    },
    boothIsCategoryList() {
      return this.boothModel.displayType == commonData.boothDic.categoryListType;
    },
    boothIsHtml() {
      return this.boothModel.displayType == commonData.boothDic.htmlType;
    }
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

.input_item{
  width:400px;
  @media @mobile{
    width: 200px;
  }
}

.uploaded-img {
  width: 180px;
  text-align: center;
  margin-top: 10px;
  border: 1px solid #ccc;
  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
}
.type-name {
  text-align: center;
  color: rgb(136, 136, 136); font-size: 12px;
}

.selected-item {
  background-color: #ccc;
}
</style>
